<template>
    <div class="dialogue">
      <div class="message">
          <ul>
             <li class="my_self">
               <div class="head">
                 <img src="~images/aimer.jpg" alt="">
               </div>
                <div class="says">
                  是今天吗
                <div class="triangle-left"></div>
               </div>
            </li>
            <li class="another">
               <div class="head">
                 <img src="~images/aimertwo.jpg" alt="">
               </div>
                <div class="says">
                  是的
                <div class="triangle-left"></div>
               </div>
            </li>
               <li class="my_self">
               <div class="head">
                 <img src="~images/aimer.jpg" alt="">
               </div>
                <div class="says">
                  九点？
                <div class="triangle-left"></div>
               </div>
            </li>
            </li>
               <li class="another">
               <div class="head">
                 <img src="~images/aimertwo.jpg" alt="">
               </div>
                <div class="says">
                  对的啊！是
                <div class="triangle-left"></div>
               </div>
            </li>
          </ul>
      </div>
      <footer class="import">
         <div class="input">
          <mt-field  placeholder="" v-model="username"></mt-field>
        </div>
         <div class="send">发送</div>
      </footer>
    </div>
</template>

<script>
  
  import { Field } from 'mint-ui';


</script>

<style scoped lang="stylus">
    
    .dialogue
      padding-top 0.1449rem
      border-top 0.0242rem solid #dddddd
      background-color #F5F5F5
    .message
      .my_self
        display flex
        align-content center
        padding 0 0.2415rem
        align-items center
        margin-top 0.3623rem
    
        .head
          width 0.9662rem
          height 0.9662rem
            
          img
            width 100%
        .says
          padding 0.2657rem 0.2657rem
         
          font-size 0.3623rem
          margin-left 0.1449rem
          position relative
          border-radius 0.0966rem
          background-color #fff
          .triangle-left
            width: 0;
            height: 0;
            border-top: 0.0966rem solid transparent;
            border-bottom: 0.0966rem solid transparent;
            border-right: 0.1208rem solid  #fff;
            position absolute
            bottom 50%
            left -3px
            transform translateY(0.1208rem)

      .another
        display flex
        align-content center
        flex-direction row-reverse
        padding 0 0.2415rem
        align-items center
        margin-top 0.3623rem
    
        .head
          width 0.9662rem
          height 0.9662rem
            
          img
            width 100%
        .says
          padding 0.2657rem 0.2657rem
          background-color #A6F456
          font-size 0.3623rem
          margin-right 0.1449rem
          position relative
          border-radius: 0.0966rem;
          
          .triangle-left
            width: 0;
            height: 0;
            border-top: 0.0966rem solid transparent;
            border-bottom: 0.0966rem solid transparent;
            border-left: 0.1208rem solid #A6F456;
            position absolute
            bottom 50%
            right -0.0966rem
            transform translateY(0.1208rem)
     .import
       height 45px
       border-top 1px solid #CCCCCC
       display flex
       justify-content center
       align-items center
       position fixed
       bottom 0px
       width 100%
       padding-right 12px
       background-color: #fff;  

       .input
         flex 1
         padding: 0px 15px
         padding-bottom: 5px;
         padding-top: 5px;
       .send
         width 45px
         height 25px
         background-color #2A96F5
         border-radius 3px
         font-size 14px 
         color #fff
         display flex
         justify-content center
         align-items center

    .mint-cell
      min-height 34px


</style>

